<template>
  <div class="recommend">
    <!-- 热门话题 -->
    <div class="rd-topic">
      <div>
        <span><van-icon name="fire-o" color="#ee0a24" />热门话题</span>
        <span class="f-color-6">更多话题></span>
      </div>
      <div>
        <van-row justify="space-between">
          <van-col
            :span="11"
            v-for="item in 6"
            :key="item"
            class="custom-item"
            @click="route.push({ path: '/hot_topic_detail' })"
          >
            <span class="f-color-da1717">#</span> 萌宠观察局
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 用户发布片段 -->
    <section>
      <Publish v-for="item in 10" :key="item" :genre="item"></Publish>
    </section>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import Publish from './components/publish.vue'

const route = useRouter()
</script>

<style scoped lang='scss'>
.f-color-6 {
  color: #666666;
}
.f-color-da1717 {
  color: #da1717;
}
.recommend {
  padding: 15px 10px;
}
.rd-topic {
  margin-bottom: 20px;
  & > :nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
  & > :nth-child(2) {
    .custom-item {
      border-radius: 20px;
      background-color: antiquewhite;
      padding: 5px 8px;
      margin: 5px 0px;
      box-sizing: border-box;
    }
  }
}
</style>